<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态脚本</title>
</head>
<body>
</body>
<script>
  /*1.动态脚本
   *  a.<script>元素用于向网页中插入 JavaScript 代码，可以是 src 属性包含的外部文件，也可以是作为该元素内容的源代码。
   *  b.动态脚本就是在页面初始加载时不存在，之后又通过 DOM 包含的脚本。
   *  c.与对应的 HTML 元素一样，有两种方式通过<script>动态为网页添加脚本：引入外部文件和直接插入源代码。
   */

   /*2.动态脚本-引入外部文件（两种引入方式）
    *  a.直接引入外部文件（<script src="foo.js"><\/script>）。
    *  b.通过DOM编程创建script元素，并引入外部文件,在添加到文档中。
    *  c.DOM 代码实际上完全照搬了它要表示的 HTML 代码。注意，在上面最后一行把<script>元素添加到页面之前，是不会开始下载外部文件的
    */
    function checkloadScript(url){
      //1.创建script标签元素
      let script = document.createElement('script');
      //2.给新建的script标签元素添加src属性并赋值
      script.src = url;
      //3.将创建好的script元素添加到文档中
      document.body.appendChild(script);
    }
    //加载之后，这个脚本就可以对页面执行操作了。
    // checkloadScript('outerLink.js');

    /*3.动态脚本-嵌入源代码
     *  a.传入js代码。
     *  b.页面加载完成之后立即执行。
     *  c.以这种方式加载的代码会在全局作用域中执行，并在调用返回后立即生效。基本上，这就相当于在全局作用域中把源代码传给 eval()方法。
     *  d.注意，通过 innerHTML 属性创建的<script>元素永远不会执行。浏览器会尽责地创建<script>元素，以及其中的脚本文本，但解析器会给这个<script>元素打上永
     *    不执行的标签。只要是使用 innerHTML 创建的<script>元素，以后也没有办法强制其执行。
     * */
     function checkLoadScriptStr(dynamicCode){
       //1.创建script标签元素
       let script = document.createElement('script');
       //2.设置script元素属性及其值
       script.type = "text/javascript";
       //3.区分老版的IE,进行相关处理
       try{
         //非老版IE浏览器，通常可以使用标准的 DOM 文本节点插入方式，插入一个文本节点，内容为dynamicCode
         script.appendChild(document.createTextNode(dynamicCode));
       }catch(e){
         console.log(e);
         //老版IE不支持常规DOM访问其子节点，否则报错，但是提供了一个text属性(Safari 3 之前的版本不能正确支持这个 text 属性)
         script.text = dynamicCode;
       }
       document.body.append(script);
     }
     let strCode = " console.log('hello hello hello');window.alert('dynamicCode');function sayHi(){alert('hello!!!!!!!')}";
     checkLoadScriptStr(strCode);
</script>
</html>
